<template>
	<s-layout title="会员价申请">
		<view>
			<image src="../../static/group-apply.png" style="width: 100%;height: 500upx;"></image>
		</view>
		<uni-forms v-if="!state.applyStatusInfo.id || state.applyStatusInfo.audit_status === 2" ref="addressFormRef"
			v-model="state.model" :rules="state.rules" validateTrigger="bind" labelWidth="160" labelAlign="left" border
			:labelStyle="{ fontWeight: 'bold' }">
			<view class="bg-white form-box ss-p-x-30">
				<uni-forms-item name="subscriber_name" label="姓名" class="form-item">
					<uni-easyinput v-model="state.model.subscriber_name" placeholder="请填写姓名" :inputBorder="false"
						placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal" />
				</uni-forms-item>

				<uni-forms-item name="phone_number" label="手机号" class="form-item">
					<uni-easyinput v-model="state.model.phone_number" type="number" placeholder="请输入手机号"
						:inputBorder="false"
						placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal">
					</uni-easyinput>
				</uni-forms-item>
			</view>
		</uni-forms>
		<su-fixed v-if="!state.applyStatusInfo.id || state.applyStatusInfo.audit_status === 2" bottom :opacity="false"
			bg="" placeholder :noFixed="false" :index="10">
			<view class="footer-box ss-flex-col ss-row-between ss-p-20">
				<view class="ss-m-b-20"><button class="ss-reset-button save-btn ui-Shadow-Main"
						style="background: #ff0000;" @tap="onSave">
						提交申请
				</button>
				</view>
			</view>
		</su-fixed>
		<view v-if="state.applyStatusInfo.id"
			style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
			<view>
				<image src="../../static/group-apply-status.png" style="width: 200rpx;height: 200rpx;"></image>
			</view>
			<view>
				{{state.applyStatusInfo.audit_status == 0 ? '正在审核中' : state.applyStatusInfo.audit_status == 1 ? '审核通过' :state.applyStatusInfo.audit_status == 2 ? '审核拒绝，重新申请' : '' }}
			</view>
		</view>
	</s-layout>
</template>

<script setup>
	import {
		computed,
		watch,
		ref,
		reactive,
		unref
	} from 'vue';
	import sheep from '@/sheep';
	import {
		onLoad,
		onPageScroll
	} from '@dcloudio/uni-app';
	import _ from 'lodash';
	import {
		consignee,
		mobile,
		address,
		region,
		subscriber_name,
		phone_number,
		id_number,
	} from '@/sheep/validate/form';

	const addressFormRef = ref(null);
	const state = reactive({
		showRegion: false,
		model: {
			id_type: 1,
			subscriber_name: '',
			phone_number: '',
			id_number: '',
			is_default: false,
		},
		rules: {
			subscriber_name,
			phone_number,
		},
		applyStatusInfo: {}
	});
	watch(
		() => state.model.province_name,
		(newValue) => {
			if (newValue) {
				state.model.region =
					`${state.model.province_name}-${state.model.city_name}-${state.model.district_name}`;
			}
		}, {
			deep: true,
		},
	);
	const onRegionConfirm = (e) => {
		console.log(e, 'e');
		state.model = {
			...state.model,
			...e,
		};
		state.showRegion = false;
	};
	const getAreaData = () => {
		if (_.isEmpty(uni.getStorageSync('areaData'))) {
			sheep.$api.data.area().then((res) => {
				if (res.code === 1) {
					uni.setStorageSync('areaData', res.data);
				}
			});
		}
	};
	const onSave = async () => {
		const validate = await unref(addressFormRef)
			.validate()
			.catch((error) => {
				console.log('error: ', error);
			});
		if (!validate) return;

		let res = null;
		let params = {
			name: state.model.phone_number,
			mobile: state.model.subscriber_name,
		}
		res = await sheep.$api.user.groupApply.applySubmit(params);
		if (res.code === 1) {
			sheep.$router.back();
		}
	};

	onLoad(async (options) => {
		let res = await sheep.$api.user.groupApply.applyStatus();
		state.applyStatusInfo = res.data
		// getAreaData();
		if (options.id) {
			let res = await sheep.$api.user.realName.detail(options.id);
			if (res.code === 1) {
				state.model = {
					...state.model,
					...res.data,
				};
			}
		}

		if (options.data) {
			let data = JSON.parse(options.data);
			state.model = {
				...state.model,
				...data,
			};
		}
	});
</script>

<style lang="scss" scoped>
	:deep() {
		.uni-forms-item__label .label-text {
			font-size: 28rpx !important;
			color: #333333 !important;
			line-height: normal !important;
		}

		.uni-easyinput__content-input {
			font-size: 28rpx !important;
			color: #333333 !important;
			line-height: normal !important;
			padding-left: 0 !important;
		}

		.uni-easyinput__content-textarea {
			font-size: 28rpx !important;
			color: #333333 !important;
			line-height: normal !important;
			margin-top: 8rpx !important;
		}

		.uni-icons {
			font-size: 40rpx !important;
		}

		.is-textarea-icon {
			margin-top: 22rpx;
		}

		.is-disabled {
			color: #333333;
		}
	}

	.default-box {
		width: 100%;
		box-sizing: border-box;
		height: 100rpx;

		.default-box-title {
			font-size: 28rpx;
			color: #333333;
			line-height: normal;
		}
	}

	.footer-box {
		.save-btn {
			width: 710rpx;
			height: 80rpx;
			border-radius: 40rpx;
			background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
			color: $white;
		}

		.cancel-btn {
			width: 710rpx;
			height: 80rpx;
			border-radius: 40rpx;
			background: var(--ui-BG);
		}
	}
</style>